<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <#include "/comm/module-edit.ftl"/>
    <style type="text/css">
        /*img[src=''],*/
        /*img:not([src]) {*/
        /*    opacity: 0;*/
        /*}*/

    </style>
</head>

<body>
<div class="layui-div-body">
    <div class="x-nav">
              <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">内容管理</a>
                  <a href="">文章管理</a>
                <a>
                    <cite>文章内容管理</cite></a>
              </span>
    </div>
    <div class="layui-fluid layui-div-edit" style="margin-bottom: 80px;">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">文章类型</label>
                    <div class="layui-input-inline">
                        <div id="gtc_code" initValue="${info.gtc_code!}"></div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline" style="width: 800px;">
                        <#if info._id !=''>
                            <input type="text" name="title" value="${info.title!}"
                                   placeholder="请输入标题" class="layui-input" disabled>
                        <#else>
                            <input type="text" name="title" lay-verify="required" value=""
                                   placeholder="请输入标题" class="layui-input" lay-reqtext="请填写标题">
                        </#if>

                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">链接URL</label>
                <div class="layui-input-inline" style="width: 1122px;">
                    <input type="text" name="url" lay-verify="url" value="${info.url!}"
                           placeholder="请输入名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">封面图</label>
                <div class="layui-input-inline" style="width: 60%;">
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 选择封面图
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;"
                                 src="${info.simg!}">
                            <input type="hidden" id="simg" name="simg" value="${info.simg!}">
                            <div id="ID-upload-demo-text"></div>
                        </div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="number" name="sort"
                               placeholder="请输入数值" lay-affix="number" min="0" step="1" value="${info.sort!1}"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">展示时间</label>
                    <div class="layui-input-inline  layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="star_time" id="star_time" autocomplete="off"
                               class="layui-input date-input" placeholder="开始时间">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline  layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="end_time" id="end_time" lay-verify="date" autocomplete="off"
                               class="layui-input  date-input" placeholder="结束时间">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">摘要</label>
                <div class="layui-input-block">
                    <textarea name="summary" placeholder="请输入内容" class="layui-textarea">${info.summary!}</textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文章内容<span
                            style="color: #b2b2b2;">   （Ctrl+Shift+F 退出编辑全屏）</span></label>
                <div class="layui-input-block">
                    <textarea name="content" placeholder="请输入内容" id="editTextarea"
                              class="layui-textarea" style="min-height: 600px;height: auto;">${info.content!}</textarea>
                </div>
            </div>
            <@shiro code="gen:article:add,gen:article:edit">
                <div class="layui-form-item" style="left: 0">
                    <div class="layui-footer">
                        <button class="layui-btn" lay-submit="" lay-filter="save">立即提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="btn-reset">重置</button>
                    </div>
                </div>
                <input type="hidden" id="_id" name="_id" value="${info._id}"/>
            </@shiro>
        </form>
    </div>
</div>
<script>
    layui.config({
        base: '${request.contextPath}/assets/lib/' //静态资源所在路径
    }).extend({
        combotree: 'combotree',
        tinymce: "tinymce"
    });
    layui.use(['edit', 'combotree', 'tinymce'], function () {
        let edit = layui.edit, $ = layui.$, combotree = layui.combotree, form = layui.form, layer = layui.layer;
        let element = layui.element, tinymce = layui.tinymce;
        edit.render(function (obj) {
            var edit = tinymce.getEditor()
            // 获取编辑器HTML内容
            obj["content"] = edit.getContent();
            save(obj)
        });
        let laydate = layui.laydate;
        // 日期
        laydate.render({
            elem: '.date-input',
            format: 'yyyy-MM-dd HH:mm',
            type: 'datetime',
            fullPanel: true // 2.8+
        });
// 自定义验证规则
        form.verify({
            url: function (value) {
                if (value && !/^https?:\/\/[^\s]+$/.test(value)) {
                    return '请输入有效的URL地址';
                }
            },
            date: function (value) {
                const star = $("#star_time").val()
                const date1 = new Date(star);
                const date2 = new Date(value);
                if (value && date2 < date1) {
                    return '结束时间必须大于开始时间';
                }
            }
        });
        combotree.render({
            id: 'gtc_code',
            elem: '#gtc_code',
            isMultiple: false,
            expandLevel: 2,
            yChkboxType: 's',
            nChkboxType: 's',
            ajaxUrl: "${request.contextPath}/gen/article/category/tree",
            placeholder: "请选择父级节点",
            layVerify: 'required'
        });

        var upload = layui.upload;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '${request.contextPath}/comm/uploadRes', // 实际使用时改成您自己的上传接口即可。
            data: {//传递给上传接口的额外参数，支持静态赋值和动态赋值两种写法
                type: 'image',
                folder: "article"
            },
            accept: "images",//指定允许上传时校验的文件类型。可选值有：images 图片类型file 所有文件类型video 视频类型audio 音频类型
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                console.log(res)
                // 若上传失败
                if (res.code <= 0) {
                    return layer.msg('上传失败！', {icon: 5});
                }
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<a class="layui-btn layui-btn-xs  layui-btn-danger deleteImage">删除</a>');
                demoText.find('.deleteImage').on('click', function () {
                    $('#simg').val(""); // 图片链接（base64）
                    $('#ID-upload-demo-img').removeAttr('src'); // 图片链接（base64）
                    element.progress('filter-demo', '0%'); // 进度条复位
                    demoText.html("")
                });
                $('#simg').val(res.data); // 图片链接（base64）
                // 上传成功的一些操作
                //$('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if (n === 100) {
                    layer.msg('上传成功', {icon: 1});
                }
            }
        });

// 上传配置
        tinymce.render({
            elem: '#editTextarea',
            images_upload_url: '${request.contextPath}/comm/uploadRes',//配置上传接口
            form: {
                name: 'file',//配置上传文件的字段名称
                data: {
                    type: 'image',
                    folder: "article"
                }
            }
        });
        $('#btn-reset').on('click', function () {
            combotree.setValue('parent_code', "")
        });

    });
</script>
</body>

</html>